﻿<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式商品展示及商品信息比较网格布局界面</title>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

<script src="js/modernizr.custom.js"></script>
</head>
<body>

<div class="compare-basket">
<button class="action action--button action--compare"><i class="fa fa-check"></i><span class="action__text">Compare</span></button>
</div>

<div class="view">

<section class="grid">

<div class="product">
<div class="product__info">
<img class="product__image" src="images/1.png" alt="Product 1" />
<h3 class="product__title">Chryseia</h3>
<span class="product__year extra highlight">2011</span>
<span class="product__region extra highlight">Douro</span>
<span class="product__varietal extra highlight">Touriga Nacional</span>
<span class="product__alcohol extra highlight">13%</span>
<span class="product__price highlight">$55.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/2.png" alt="Product 2" />
<h3 class="product__title">Meiomi Pinot Noir</h3>
<span class="product__year extra highlight">2013</span>
<span class="product__region extra highlight">California</span>
<span class="product__varietal extra highlight">Pinot Noir</span>
<span class="product__alcohol extra highlight">12%</span>
<span class="product__price highlight">$19.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/10.png" alt="Product 3" />
<h3 class="product__title">Antucura Cabernet Sauvignon</h3>
<span class="product__year extra highlight">2013</span>
<span class="product__region extra highlight">Argentina</span>
<span class="product__varietal extra highlight">Cabernet Sauvignon </span>
<span class="product__alcohol extra highlight">12%</span>
<span class="product__price highlight">$15.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/4.png" alt="Product 4" />
<h3 class="product__title">Leonetti Sangiovese</h3>
<span class="product__year extra highlight">2012</span>
<span class="product__region extra highlight">Washington</span>
<span class="product__varietal extra highlight">Sangiovese</span>
<span class="product__alcohol extra highlight">13%</span>
<span class="product__price highlight">$85.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/5.png" alt="Product 5" />
<h3 class="product__title">Chateau Pontet-Canet</h3>
<span class="product__year extra highlight">2009</span>
<span class="product__region extra highlight">Pauillac, Bordeaux</span>
<span class="product__varietal extra highlight">Bordeaux </span>
<span class="product__alcohol extra highlight">12%</span>
<span class="product__price highlight">$269.00</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/6.png" alt="Product 6" />
<h3 class="product__title">Quintessa</h3>
<span class="product__year extra highlight">2011</span>
<span class="product__region extra highlight">California</span>
<span class="product__varietal extra highlight">Cabernet Sauvignon</span>
<span class="product__alcohol extra highlight">12%</span>
<span class="product__price highlight">$125.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/7.png" alt="Product 7" />
<h3 class="product__title">Clarendon Hills Astralis</h3>
<span class="product__year extra highlight">2006</span>
<span class="product__region extra highlight">McLaren Vale</span>
<span class="product__varietal extra highlight">Syrah, Shiraz</span>
<span class="product__alcohol extra highlight">12%</span>
<span class="product__price highlight">$153.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/8.png" alt="Product 8" />
<h3 class="product__title">Lapostolle Clos Apalta</h3>
<span class="product__year extra highlight">2010</span>
<span class="product__region extra highlight">Chile</span>
<span class="product__varietal extra highlight">Bordeaux</span>
<span class="product__alcohol extra highlight">12%</span>
<span class="product__price highlight">$82.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/9.png" alt="Product 9" />
<h3 class="product__title">Bodega Colome Reserva</h3>
<span class="product__year extra highlight">2009</span>
<span class="product__region extra highlight">Argentina</span>
<span class="product__varietal extra highlight">Malbec</span>
<span class="product__alcohol extra highlight">13%</span>
<span class="product__price highlight">$99.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/10.png" alt="Product 10" />
<h3 class="product__title">Montevertine Le Pergole Torte</h3>
<span class="product__year extra highlight">2011</span>
<span class="product__region extra highlight">Tuscany</span>
<span class="product__varietal extra highlight">Sangiovese </span>
<span class="product__alcohol extra highlight">12%</span>
<span class="product__price highlight">$119.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/2.png" alt="Product 11" />
<h3 class="product__title">Massolino Vigna Parussi Barolo</h3>
<span class="product__year extra highlight">2009</span>
<span class="product__region extra highlight">Piedmont</span>
<span class="product__varietal extra highlight">Nebbiolo</span>
<span class="product__alcohol extra highlight">12%</span>
<span class="product__price highlight">$169.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
<div class="product">
<div class="product__info">
<img class="product__image" src="images/4.png" alt="Product 12" />
<h3 class="product__title">Chateau Branaire-Ducru</h3>
<span class="product__year extra highlight">2009</span>
<span class="product__region extra highlight">St-Julien, Bordeaux</span>
<span class="product__varietal extra highlight">Bordeaux</span>
<span class="product__alcohol extra highlight">13%</span>
<span class="product__price highlight">$99.90</span>
<button class="action action--button action--buy"><i class="fa fa-shopping-cart"></i><span class="action__text">Add to cart</span></button>
</div>
<label class="action action--compare-add"><input class="check-hidden" type="checkbox" /><i class="fa fa-plus"></i><i class="fa fa-check"></i><span class="action__text action__text--invisible">Add to compare</span></label>
</div>
</section>
</div>

<section class="compare">
<button class="action action--close"><i class="fa fa-remove"></i><span class="action__text action__text--invisible">Close comparison overlay</span></button>
</section>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
</body>
</html>